<template>
  <div class="login-container">

    <div class="left-section">

    </div>
    <div class="right-section">
      <div class="login-form">
        <div class="logo">
          <div>
            <img src="@/assets/logo.png" alt="Company Logo" class="company-logo"
                 style="margin-left: 35%;width: 80px;height: 65px">
          </div>
          <div class="logoName">
            <span>建工<br>集团</span>
          </div>
        </div>
        <div style="width: 100%;height: 2px;background: #8b8d8f;margin-top: 70px"></div>
        <div>

          <div class="login">

            <h2>欢 迎 登 录</h2>
          </div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>


import request from "@/utils/request";

export default {
  name: "ToLogin",
  data() {
    return {
      loginForm: {
        username: '吴大哥',
        password: '123456'
      },
      loginFormRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          request("login", "post", this.loginForm, false).then(o => {
            this.$message.success("登录成功")
            localStorage.Authorization = o;
            this.$router.push("/index")
          })
          //
          // console.log('登录成功');
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

.login-container {
  background-image: url("../assets/login3.jpeg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.left-section {
  flex: 1;
  text-align: center;
}

.logo {
  width: 100%;
  height: 60px;
  float: left
}

.logoName {
  color: #161616;
  width: 20%;
  margin-left: 46%;
  margin-top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: x-large;
  padding-bottom: 20px;

}

.login {
  color: #2f94fc;
  margin-top: 10px;

}

.right-section {

  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  /*opacity: 0.95;*/
  background: white;
  width: 480px;
  height: 350px;
  padding: 20px;
  margin-left: 100px;
  border: 2px solid #ebeef5;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7
  );
}

.login-form h2 {
  text-align: center;
  margin-bottom: 20px;
}
</style>